<template>
	<view class="wrap" :style="colorStyle">
		<uni-popup ref="popup"  :safe-area="false" :type="typeName" border-radius="8px 8px 0 0">
			<view class="pay_box">
				<view class="title">
					剩余尾款：<text style="color: #E63523;">￥{{goodInfo.last_price||0}}</text>
				</view>
				<view class="body">
					<view class="body_item flex_sb">
						<view class="left_info flex_s">
							<view class="img_box">
								<image :src="imgSrc +'pay1.png'" mode="aspectFill"></image>
							</view>
							<view class="text_box">
								<view class="text1">
									在线支付
								</view>
								<view class="text2">
									加手续费{{goodInfo.aft_handing_percent}}%，需要支付￥{{goodInfo.all_last_price}}
								</view>
							</view>
						</view>
						<view class="right_info" @click="payType=1">
							<image :src="imgSrc+'check1.png'" mode="aspectFill" v-if="payType==2"></image>
							<image :src="imgSrc+'check2.png'" mode="aspectFill" v-else></image>
						</view>
					</view>
					<view class="body_item flex_sb">
						<view class="left_info flex_s">
							<view class="img_box">
								<image :src="imgSrc+'pay2.png'" mode="aspectFill"></image>
							</view>
							<view class="text_box">
								<view class="text1">
									<text>余额支付</text>
									<text style="color: #D43030;font-size: 22rpx;margin-left: 14rpx;">推荐使用</text>
								</view>
								<view class="text2">
									需要支付￥{{goodInfo.last_price||0}}
								</view>
							</view>
						</view>
						<view class="right_info" @click="payType=2">
							<image :src="imgSrc+'check1.png'" mode="aspectFill" v-if="payType==1"></image>
							<image :src="imgSrc+'check2.png'" mode="aspectFill" v-else></image>
						</view>
					</view>
				</view>
				<view class="btn" @click="confirm">
					立即支付
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import colors from '@/mixins/color.js';
	export default {
		name:"payModal",
		props:{
			dataInfo:{
				type:Object,
				default:{}
			},
			typeName:{
				type:String,
				default:'bottom'
			}
		},
		mixins: [colors],
		watch:{
			dataInfo(newVal,oldVal){
				this.goodInfo=newVal
				console.log(this.goodInfo,"商品信息");
			}
		},
		data() {
			return {
				payType: 2,
				goodInfo:{},
				imgSrc:this.$imgSrc
			};
		},
		methods:{
			// 在线支付二次弹窗
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			close() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.close()
			},
			confirm(){
				this.$emit('confirm',this.payType)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	.pay_box {
		padding: 70rpx 40rpx;
		background: #F6F6F6;
		width: 750rpx;
		// height: 775rpx;
		border-radius: 30rpx 30rpx 0px 0px;
	
		.title {
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 50rpx;
		}
	
		.btn {
			width: 690rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 47rpx;
			background: var(--view-theme);
			text-align: center;
			font-size: 34rpx;
			color: #fff;
			margin: 150rpx auto 30rpx;
		}
	
		.body {
	
			.body_item {
				width: 680rpx;
				height: 146rpx;
				border-radius: 20rpx;
				margin-bottom: 19rpx;
				padding: 40rpx 30rpx;
				background: #fff;
	
				.left_info {
					.img_box {
						width: 77rpx;
						height: 77rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 18rpx;
	
						image {
							width: 100%;
							height: 100%;
	
						}
					}
	
					.text_box {
						.text1 {
							font-size: 28rpx;
							font-weight: 700;
							margin-bottom: 14rpx;
						}
	
						.text2 {
							font-size: 22rpx;
							color: #8C7137;
						}
					}
				}
	
				.right_info {
					width: 45rpx;
					height: 45rpx;
					border-radius: 50%;
					overflow: hidden;
	
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>